<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false" v-if='!is_saas'>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-col :span="24">
            <a-alert
              message="该功能需要到微信公众平台(开发管理->开发设置->扫普通链接二维码打开小程序)中进行配置"
              banner
            /><br />
            <a-alert banner :showIcon="false" type="warning">
              <template slot="message">
                <div>协议类型: https</div>
                <div>选择大小写: 小写</div>
                <div>二维码规则: {{config.param_url}} <a-icon type="copy" @click="copyContent(config.param_url)" /></div>
                <div>前缀占用规则: 占用</div>
                <div>
                  小程序功能页面: {{config.mini_url}}
                  <a-icon type="copy" @click="copyContent(config.mini_url)" />
                </div>
              </template>
            </a-alert>
          </a-col>
        </a-col>

        <a-col :span="12">
          <a-col :span="24">
            <a-alert
              message="支付宝需要到支付宝开放平台(控制台->选择对应的小程序->管理->码管理->关联普通二维码)中进行配置"
              banner
            /><br />
            <a-alert banner :showIcon="false" type="warning">
              <template slot="message">
                <div>匹配规则: 精确匹配</div>
                <div>二维码地址: {{config.param_url}} <a-icon type="copy" @click="copyContent(config.param_url)" /></div>
                <!--                <div>前缀占用规则: 不占用</div>-->
                <div>
                  小程序功能页面: {{config.mini_url}}
                  <a-icon type="copy" @click="copyContent(config.mini_url)" />
                </div>
              </template>
            </a-alert>
          </a-col>
        </a-col>

      </a-row>
    </a-card>
    <a-card :bordered="false">
      <p>下载收款码</p>
      <div class="code">
        <div class="codeBox" v-if="business_model === 1">
          <img :src="qrImg" alt="">
          <p>{{qrText}}</p>
          <a-button type="link" icon="download" @click="downloadCode">下载二维码</a-button>
        </div>
        <div class="codeBox" v-else>
          <img :src="qrImg" alt="">
          <p>{{qrText1}}</p>
          <a-button type="link" icon="download" @click="downloadCode">下载二维码</a-button>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { downQr } from '@/api/plugin/scanCodePay'
export default {
  name: 'ScanCodePayIndex',
  data () {
    return {
      qrImg: '',
      qrText:'店铺聚合收款码',
      qrText1:'平台收款码',
      business_model: 1,
      is_saas: 1,
      config: {
        "mini_url": '',
        "param_url": '',
      }
    }
  },
  methods: {
    // 获取聚合收款码
    async getQrCode() {
      const res = await downQr()
      if(res.code == 0) {
        this.business_model = res.data.business_model
        this.qrImg = res.data.qr_url
        this.is_saas = res.data.is_saas
        this.config = res.data.data
      }
    },
    copyContent: function(text) {
      this.$copyText(text)
        .then(e => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
    // 保存二维码
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') //得到图片的base64编码数据

        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
    // 点击下载二维码
    downloadCode() {
      if(this.qrImg && this.qrText) {
        this.downloadIamge(this.qrImg, this.qrText)
      }
    }
  },
  mounted() {
    this.getQrCode()
  },
}
</script>

<style scoped lang="less">
.qr-wrap img {
  width: 100%;
  height: auto;
}
.code {
  display: flex;
  align-items: center;
  padding: 160px 0;
  justify-content: center;
  .codeBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:0 20px;
    img {
      width: 200px;
      height: 200px;
    }
    p {
      margin: 10px 0;
    }
  }
}
</style>
